<style>
table.lo * { font-size: 12px; font-family: Trebuchet MS; }
table.lo { width: 100%; }
table.lo td { vertical-align: top; text-align: left; }
table.lo td.left { width: 400px; }
table.lo td.middle { width: 400px; }
table.lo td.right { width: 400px; }
.pure_table_extra { width: 1100px; margin-top: 5px; }
.pure_table_extra th { height: 25px; line-height: 25px; }
.pure_table_extra img { cursor: pointer; margin-right: 2px; }
.pure_table_extra td { vertical-align: middle; }
</style>

<?php 
$date = date('Y-m-d', time());
$bpts = unserialize(BPTS);
$users = $orm->get('pb_colg_user', 't.first_name', 'ASC', NULL, NULL, NULL)->d;
?>

<div id="inv_dialog_inv" class="pure-form" style="display: none; overflow: visible;" title="Invoice & Payment">
  <h3>Invoice</h3>
  <div>
    <table class="lo" cellPadding="0" cellSpacing="0">
      <tr>
        <td class="left">
          <div class="pure-form pure-form-aligned pure_form_extra">
            <legend>System Log</legend>
            
            <div class="pure-control-group">
              <label>Invoice ID</label>
              <input id="inv_inv_id" type="text" class="pure-input-1-2" placeholder="{Invoice ID}" readonly="true" />
            </div>
            
            <div class="pure-control-group">
              <label>Date</label>
              <input id="inv_date" type="text" class="pure-input-1-2" placeholder="{Date}" readonly="true" />
            </div>
          </div>
          
          <div>&nbsp;</div>
            
          <div class="pure-form pure-form-aligned pure_form_extra">
            <legend>Info</legend>
            
            <div class="pure-control-group">
              <label>Student</label>
              <input id="inv_student" type="text" class="pure-input-1-2 inv" placeholder="{Student}" />
              <i class="fa fa-times-circle" style="color: red;"></i>
              <i class="fa fa-check-circle" style="color: green; display: none;"></i>
            </div>
            
            <div class="pure-control-group" style="display: none;">
              <label>Enrollment ID</label>
              <input id="inv_enrl_id" type="text" class="pure-input-1-2" placeholder="{Enrollment ID}" readonly="true" />
            </div>

            
            <div class="pure-control-group" style="display: none;">
              <label>User</label>
              <select id="inv_marketing" class="pure-input-1-2 inv"></select>
            </div>
            
            <div class="pure-control-group">
              <label>Paritcular</label>
              <select id="inv_particular" class="pure-input-1-2 inv"></select>
            </div>
            
            <div class="pure-control-group">
              <label>Trust Account</label>
              <span id="inv_ta">
                <input class="inv" type="radio" id="inv_no" name="ta" checked="checked"><label class="inv" for="inv_no" style="width: 60px; margin-right: 0;">No</label>
                <input class="inv" type="radio" id="inv_yes" name="ta"><label class="inv" for="inv_yes" style="width: 60px; margin-left: -5px;">Yes</label>
              </span>
            </div>
            
            <div class="pure-control-group ta">
              <label>From</label>
              <input id="inv_from" type="text" class="pure-input-1-2 inv" placeholder="{From}" />
            </div>
            
            <div class="pure-control-group ta">
              <label>To</label>
              <input id="inv_to" type="text" class="pure-input-1-2 inv" placeholder="{To}" />
            </div>
          </div>
        </td>
        <td class="middle">
          <div class="pure-form pure-form-aligned pure_form_extra">
            <legend>Detail</legend>
            
            <div id="inv_papers_div" class="pure-control-group">
              <label>Balance</label>
              <input id="inv_balance__" type="text" class="pure-input-1-2" placeholder="{Balance}" readonly="true" disabled="disabled" style="font-weight: bold;"/>
            </div>
            
            <div id="inv_papers_div" class="pure-control-group">
              <label>Amount</label>
              <input id="inv_amount" type="text" class="pure-input-1-2 inv" placeholder="{Total Due}" />
            </div>
            
            <div class="pure-control-group">
              <label>Due Date</label>
              <input id="inv_due_date" type="text" class="pure-input-1-2 pay" placeholder="{Due Date}" />
            </div>
            
            <div class="pure-control-group">
              <label>Note</label>
              <textarea id="inv_comment" style="resize: none; height: 200px;" class="pure-input-1-2" placeholder="{Note}"></textarea>
            </div>
          </div>
        </td>
        <td class="right">
          <div class="pure-form pure-form-aligned pure_form_extra">
            <legend>New Payment</legend>
            
            <div class="pure-control-group">
              <label>Date</label>
              <input id="inv___date" type="text" class="pure-input-1-2 pay" placeholder="{Payment Date}" value="<?php echo $date; ?>" />
            </div>
            
            <div id="inv_papers_div" class="pure-control-group">
              <label>Amount</label>
              <input id="inv___paid" type="text" class="pure-input-1-2 pay" placeholder="{Payment Amount}" value="0" />
            </div>
            
            <div id="inv_papers_div" class="pure-control-group">
              <label>Discount +/-</label>
              <input id="inv___discount" type="text" class="pure-input-1-2 pay" placeholder="{+/-}" value="0" />
            </div>
          </div>
        </td>
      </tr>
    </table>
  </div>
  <h3>Payment History</h3>
  <div>
    <table class="pure-table pure_table_extra" style="width: 650px;">
      <thead>
        <tr>
          <th style="width: 120px;" class="ui-widget-header">Date</th>
          <th style="width: 200px;" class="ui-widget-header">Paid</th>
          <th style="width: 200px;" class="ui-widget-header">Discount +/-</th>
          <th class="ui-widget-header"></th>
        </tr>
      </thead>
      <tbody id="inv_pays"></tbody>
    </table>
  </div>
</div>

<script>
  /*<![CDATA[*/
  var ____date = '<?php echo $date; ?>';
  var ____bpts = JSON.parse('<?php echo addslashes(json_encode($bpts)); ?>');
  var ____users = JSON.parse('<?php echo addslashes(json_encode($users)); ?>');
  
  $(function() {
    bpts = [];
    $.map(____bpts, function(itm) {
      return bpts[bpts.length] = itm;
    });
    bpts = bpts.sort(function(a, b) {
      return a.localeCompare(b);
    });
    
    for (var idx in bpts) {
      var itm = bpts[idx];
      $('#inv_particular').append('<option value="' + itm + '">' + itm + '</option>');
    }

    $('#inv_marketing').append('<option value="0">&nbsp;</option>');
    for (var idx in ____users) {
      var itm = ____users[idx];
      $('#inv_marketing').append('<option value="' + itm.id + '">' + itm.first_name + ' ' + itm.last_name + '</option>');
    }
    
    $('#inv_ta').buttonset();
    
    $('#inv_due_date').datepicker({
      changeMonth: true,
      changeYear: true,
      dateFormat: "yy-mm-dd"
    });

    $('#inv_from').datepicker({
      changeMonth: true,
      changeYear: true,
      dateFormat: "yy-mm-dd",
    });

    $('#inv_to').datepicker({
      changeMonth: true,
      changeYear: true,
      dateFormat: "yy-mm-dd",
    });

    $('#inv___date').datepicker({
      changeMonth: true,
      changeYear: true,
      dateFormat: "yy-mm-dd"
    });
  });

  function ____render_pays(obj, opts) {
    $("#inv_pays").empty();
    for (var idx in obj.__pays) {
      var itm = obj.__pays[idx];
      $('#inv_pays').append(
        '<tr class="' + ((idx % 2 == 0) ? 'pure-table-even' : 'pure-table-odd') + '">' + 
          '<td>' + itm.date + '</td>' +
          '<td>' + accounting.formatMoney(itm.amount) + '</td>' +
          '<td>' + accounting.formatMoney(itm.discount) + '</td>' +
          '<td>' + 
            ((!opts || opts.vo != 1) ? '<span id="inv_del_' + itm.id + '"style="cursor: pointer; float: left;" class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>' : '') +
          '</td>' +
        '</tr>'
      );
      $('#inv_del_' + itm.id).on('click', function() {
        var req = Utils.get_by_id(this.id.replace('inv_del_', ''), obj.__pays);
        obj.balance__ -= parseFloat(req.amount, 10) + parseFloat(req.discount, 10);
        req.__obj = Utils.clone(obj);
        Ajax.request(
          __requrl + 'del_payment',
          'req=' + Utils.encodeURI(JSON.stringify(req)),
          function(rslt) {
            Utils.splice_by_id(req.id, obj.__pays);
            ____inv(obj);
          },
          null
        );
      });
    }
    if (obj.__pays.length == 0) {
      $('#inv_pays').append('<tr class="pure-table-even"><td colspan=4>None</td></tr>');
    }
  };
  
  function ____inv(obj, opts) {
    obj.__date = obj.__date ? obj.__date : __date;
    obj.__paid = obj.__paid ? obj.__paid : 0;
    obj.__discount = obj.__discount ? obj.__discount : 0;
    
    if ((obj.balance__ == 0 && obj.id != 0) || (opts && opts.vo == 1)) {
      $('.inv').prop('disabled', 'disabled');
      $('.pay').prop('disabled', 'disabled');
      if (opts && opts.vo == 1) {
        $('#inv_comment').prop('disabled', 'disabled');
      }
    } else if (obj.enrollment_id != 0) {
      $('.inv').prop('disabled', 'disabled');
      $('.pay').removeAttr('disabled');
    } else {
      $('.inv').removeAttr('disabled');
      $('.pay').removeAttr('disabled');
    }
    
    $("#inv_dialog_inv").accordion({
      heightStyle: "content",
      collapsible:true,
      beforeActivate: function(event, ui) {
        // The accordion believes a panel is being opened
        if (ui.newHeader[0]) {
          var currHeader  = ui.newHeader;
          var currContent = currHeader.next('.ui-accordion-content');
          // The accordion believes a panel is being closed
        } else {
          var currHeader  = ui.oldHeader;
          var currContent = currHeader.next('.ui-accordion-content');
        }
        // Since we've changed the default behavior, this detects the actual status
        var isPanelSelected = currHeader.attr('aria-selected') == 'true';
        // Toggle the panel's header
        currHeader.toggleClass('ui-corner-all',isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top',!isPanelSelected).attr('aria-selected',((!isPanelSelected).toString()));
        // Toggle the panel's icon
        currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected);
        // Toggle the panel's content
        currContent.toggleClass('accordion-content-active',!isPanelSelected)    
        if (isPanelSelected) { currContent.slideUp(); }  else { currContent.slideDown(); }
        return false; // Cancel the default action
      }
    });

    $('#inv_student').autocomplete({
      source: __requrl + 'autocomplete2',
      minLength: 1,
      select: function(event, ui) {
        obj.student_id = ui.item.id;
        obj.student_title__ = ui.item.value;
        obj.user_id = ui.item.user_id;
        obj.user_title__ = ui.item.user_value;
        ____student(obj);
      }
    });

    $('#inv_yes').on('click', function() {
      obj.to_trustaccount = 1;
      ____ta(obj);
    });
    $('#inv_no').on('click', function() {
      obj.to_trustaccount = 0;
      ____ta(obj);
    });
    ____ta(obj);

    ____student(obj);

    $('#inv_inv_id').val(obj.track_id);
    $('#inv_date').val(obj.date);
    $('#inv_enrl_id').val(obj.enrollment_track_id);
    $('#inv_particular').val(obj.particular);

    $('#inv_due_date').val(obj.due_date);
    $('#inv_comment').val(obj.comment);

    $('#inv___date').val(obj.__date);
    

    ____bal(obj);
    $('#inv_amount').on('change', function() {
      obj.amount = this.value;
      obj.__paid = obj.amount;
      ____bal(obj);
    });
    $('#inv___paid').on('change', function() {
      obj.__paid = this.value;
      ____bal(obj);
    });
    $('#inv___discount').on('change', function() {
      obj.__discount = this.value;
      ____bal(obj);
    });

    ____render_pays(obj, opts);
  };

  function ____bal(obj) {
    obj.balance__ = parseFloat(obj.__paid, 10) + parseFloat(obj.__discount, 10) - obj.amount;
    for (var idx in obj.__pays) {
      var itm = obj.__pays[idx];
      obj.balance__ += parseFloat(itm.amount) + parseFloat(itm.discount);
    }
    $('#inv_balance__').val(obj.balance__);
    if (obj.balance__ == 0) {
      $('#inv_balance__').css('background', 'grey');
      $('#inv_balance__').css('color', 'black');
    } else if (obj.balance__ < 0) {
      $('#inv_balance__').css('background', 'red');
      $('#inv_balance__').css('color', 'white');
    } else if (obj.balance__ > 0) {
      $('#inv_balance__').css('background', 'green');
      $('#inv_balance__').css('color', 'white');
    }
    $('#inv_amount').val(obj.amount);
    $('#inv___paid').val(obj.__paid);
    $('#inv___discount').val(obj.__discount);
  };

  function ____ta(obj) {
    if (obj.to_trustaccount == 0) {
      $("#inv_no").prop("checked", true);
      $(".ta").hide();
    } else {
      $("#inv_yes").prop("checked", true);
      $(".ta").show();
    }
    $('#inv_ta').buttonset('refresh');
    $('#inv_from').val(obj.from);
    $('#inv_to').val(obj.to);
  }

  function ____student(obj) {
    if (obj.student_id == 0) {
      $(".fa-times-circle").show();
      $(".fa-check-circle").hide();
    } else {
      $(".fa-times-circle").hide();
      $(".fa-check-circle").show();
    }
    $('#inv_student').val(obj.student_title__);
    $('#inv_marketing').val(obj.user_id);

    $('#inv_student').on('blur', function() {
      $('#inv_student').val(obj.student_title__);
    });
  };
  /*]]>*/
</script>